﻿<h2>Basic tabs</h2>
<p id="basic-tabs">
    <Tabs SelectedTabChanged="@OnSelectedTabChanged">
        <Tab Name="1" IsActive="@(selectedTab=="1")">1</Tab>
        <Tab Name="2" IsActive="@(selectedTab=="2")">2</Tab>
        <Tab Name="3" IsActive="@(selectedTab=="3")">3</Tab>
    </Tabs>
    <TabsContent @ref="tabContent" @ref:suppressField>
        <TabPanel Name="1" IsActive="@(selectedTab == "1")">
            First tab content
        </TabPanel>
        <TabPanel Name="2" IsActive="@(selectedTab == "2")">
            Second tab content
        </TabPanel>
        <TabPanel Name="3" IsActive="@(selectedTab == "3")">
            Third tab content
        </TabPanel>
    </TabsContent>
</p>
@functions{
    TabsContent tabContent;
    string selectedTab = "2";

    private void OnSelectedTabChanged( string name )
    {
        selectedTab = name;
        tabContent.SelectPanel( name );
    }
}
